<template>
    <div class="comment-box">
        <u-comment :config="config" @submit="submit" style="padding:0rem;margin-top:0rem"></u-comment>
    </div>  
</template>

<script setup>
import emoji from '@/utils/emoji'
import { onMounted, reactive } from 'vue'
import { gatewayPrefix, userMiddleContextPath, currentUser, debounce} from '@/utils/commConstance'
import { ElMessage } from 'element-plus'
import {$http} from '@/utils/axios.js'
import { UToast } from 'undraw-ui'

let userInfo;

const props = defineProps({
    currentArtId:String
})
const emit = defineEmits(['commentOk'])
onMounted(()=>{
    userInfo = JSON.parse(sessionStorage.getItem(currentUser))
})
const config = reactive({
    user: {
        id: 1,
        username: 'jack',
        avatar: 'https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100',
    },
    emoji: emoji
})

// 提交评论事件\发表评论
let temp_id = 100
const submit = ({content,finish }) => {
    console.log('评论内容===>',content);
    if(userInfo === undefined || userInfo === null){
        return ElMessage.warning('未登录,请登录后评论!!!')
    }
    console.log('neirong leixing===>',typeof content);
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetArticles/publishComment/${props.currentArtId}?content=${content}`).then(res=>{
        if(res){
            emit('commentOk',true)
            ElMessage.success('评论成功 ~ ~ ~')
        }
    })
    const comment = {
        id: String(temp_id),
        parentId: '',
        uid: config.user.id,
        address: '来自江苏',
        content: content,
        likes: 0,
        createTime: '1分钟前',
        contentImg: '',
        user: {
            username: config.user.username,
            avatar: config.user.avatar,
            level: 6,
            homeLink: `/${(temp_id += 1)}`
        },
        reply: null
    }
    setTimeout(() => {
        // finish(comment)
        UToast({ message: '评论成功!', type: 'info' })
    }, 200)
}
</script>

<style lang="less">
.u-comment{
    margin-top: -10px !important;
    .comment-form{
        padding: 0rem !important;
        .header{
            display: none;
        }
        .content{
            padding: 0rem;
        }
    }
    .comment-list-wrapper{
        display: none;
    }
}


</style>